<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>首页</title>
</head>
<%
	String base = request.getContextPath();
%>


<body>
	<div class="container">
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-6">
				<h1><%=session.getAttribute("user_id") %>，欢迎来到firefly聊天室</h1>
					<hr>
					最新：
					<div id="new">正在连接服务器...</div>
					历史：
					<div id="content"></div>
					
					<form class="form-inline" role="form" >
						<div class="form-group">
							<input type="text" class="form-control" name="msg" id="newMsg" placeholder="input msg">
						</div>
						<button type="button" class="btn btn-default" onclick="sendMsg()">send</button>
					</form>
			</div>
			<div class="col-md-3"></div>
		</div>
	</div>
	
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/sockjs-0.3.min.js"></script>
	<script>
	var url = "<%=base%>/connect";
	
	var  websocket = new SockJS(url);
		
		websocket.onopen = function(event) {
			$("#new").html("(已连接上服务器！)");
		};
		websocket.onmessage = function(event) {
			var data = JSON.parse(event.data);
			$("#new").html("<font color='red'>" + data.service + "</font>");
			$("#content").append(data.param);
			$("#content").append(" <br/> <br/>");
		};
		websocket.onerror = function(event) {
		};
		websocket.onclose = function(event) {
		}

		function sendMsg() {
			var newMsg = $("#newMsg").val();
			$("#newMsg").val('');
			
			var convertMsg = {};
			convertMsg.service = 'receive.service.demo';
			convertMsg.param=newMsg;
			
			websocket.send(JSON.stringify(convertMsg));
		}
	</script>
</body>
</html>